<template>
    <div class="app-container">
        <!-- <strong>添加讲师</strong> -->
        <el-form label-width="120px">

          <el-form-item label="教师名称" prop="name" style="width: 350px;">
            <el-input v-model="teacher.collegeName" clearable placeholder="请如实填写"></el-input>
          </el-form-item>

          <el-form-item label="教师工号" prop="number" style="width: 450px;">
            <el-input v-model="teacher.jobNumber" clearable placeholder="请输入正确格式的教职工号"></el-input>
          </el-form-item>

          <el-form-item label="教师手机号" prop="phone" style="width: 450px;">
            <el-input v-model="teacher.phone" clearable placeholder="请输入正确格式的手机号" ></el-input>
          </el-form-item>

          <el-form-item label="教师头衔" >
            <el-select v-model="teacher.level" clearable placeholder="教师头衔">
              <el-option :value="1" label="高级讲师"/>
              <el-option :value="2" label="讲师"/>
              <el-option :value="3" label="助理讲师"/>
              <el-option :value="4" label="教员"/>
            </el-select>
          </el-form-item>

          <el-form-item label="所属学院">
            <el-select v-model="teacher.college" clearable placeholder="所属专业学院">
              <el-option :value="1" label="商学院"/>
              <el-option :value="2" label="管理学院"/>
              <el-option :value="3" label="外语学院"/>
              <el-option :value="4" label="堪萨斯国际学院"/>
              <el-option :value="5" label="电信与智能制造学院"/>
              <el-option :value="6" label="计算机与软件工程学院"/>
              <el-option :value="7" label="艺术设计学院"/>
              <el-option :value="8" label="医学院"/>
              <el-option :value="9" label="文法学院(语委办)"/>
              <el-option :value="10" label="体育学院"/>
              <el-option :value="11" label="新闻与传播学院"/>
              <el-option :value="12" label="建筑工程学院"/>
              <el-option :value="13" label="音乐戏剧学院"/>
              <el-option :value="14" label="马克思主义学院"/>
              <el-option :value="15" label="国际教育学院"/>
              <el-option :value="16" label="教育学院"/>
              <el-option :value="17" label="继续教育学院"/>
              <el-option :value="18" label="国际语言中心"/>
            </el-select>
          </el-form-item>

          <el-form-item label="教师资历" style="width: 500px;">
              <el-input type="textarea" placeholder="请输入内容，不超过30字" v-model="teacher.career" maxlength="30" show-word-limit></el-input>
          </el-form-item>

          <el-form-item label="教师简介"  style="width: 500px;">
              <el-input type="textarea" placeholder="请输入内容，不超过50字" v-model="teacher.intro" maxlength="50" show-word-limit></el-input>
          </el-form-item>

          <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate()">提交</el-button>
          </el-form-item>

          <!-- TODO -->

        </el-form>
    </div>
</template>

<script>
// import teacher from '@/api/adm/teacherAdmin'
import * as teacher from '@/api/adm/teacherAdmin'
import { disable, disableTeacher, getInfoTeacher } from '@/api/adm/teacherAdmin'

    export default {
      data() {
        return {
          // 前端对象的一个封装 ，用上面的值进行一个双向绑定
          teacher:{
            collegeName:'', //教师姓名
            jobNumber:'', //教师工号
            phone:'', // 教师手机号
            college:null, //教师所属学院
            level:null, //教师头衔
            intro:'', // 教师简介
            career:'', // 教师资历
          },
          saveBtnDisabled:false  // 保存按钮是否禁用,
        }
      },
      created() {
        this.init()
      },
      watch: {  //监听
        $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
          this.init()
        }
      },
      methods: {
        init() {
          //判断路径有id值,做修改
          if(this.$route.params && this.$route.params.id) {
            //从路径获取id值
            const id = this.$route.params.id
            //调用根据id查询的方法
            this.getInfo(id)
          } else { //路径没有id值，做添加
            //清空表单
            this.teacher = {}
          }
        },
        // 根据xxx判断是修改还是删除
        saveOrUpdate(){
            //判断修改还是添加
            //根据teacher是否有id
            if(!this.$route.params.id) {
                //添加
                this.saveTeacher(this.$route.params.id)
            } else {
                //修改
                this.updateTeacher()
            }
        },
        //添加教师信息
        saveTeacher(){
          teacher.addTeacher(this.teacher).then(response => {
              //添加成功
              this.$message({
                message: "添加成功",
                type: 'success'
              });
              this.teacher = null;
              this.$router.push({path:'/adminTeacher/list'});
          }).catch(error => {
            // 请求失败
            console.error(error);
          });
        },
        //修改教师信息前的回显
        getInfo(id){
          teacher.getInfoTeacher(id).then(response => {
            //回显成功
            this.teacher = response.data.admTeacher
          })
        },
        //修改教师信息
        updateTeacher(){
          teacher.updateTeacher(this.teacher,this.$route.params.id).then(response => {
            //修改成功
            //添加成功
            this.$message({
              message: "修改成功",
              type: 'success'
            });
            // this.teacher = null;
            this.$router.push({path:'/adminTeacher/list'});
          }).catch(error => {
            // 请求失败
            console.error("请求有误，请联系工作人员！");
          });
        }
      }
}
</script>

